<template>
	<view>
		<view class="goodsWrap">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" circular>
				<swiper-item v-for="(item,index) in GoodsShow[0].goods_pic">
					<view class="swiper-item">
						<image :src="item.pics_url" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="goodsInfo">
				<view class="goods_price">
					￥{{GoodsShow[0].goods_price}}
				</view>
				<view class="flag">
					{{GoodsShow[0].goods_promotion}}
				</view>
				<view class="goods_name">
					{{GoodsShow[0].goods_name}}
				</view>
				<view class="intru">
					<view class="item" v-for="(item,index) in GoodsShow[0].goods_introduce" :key="index">
						{{index}}{{item}}
					</view>
				</view>
			</view>
		</view>
		<uni-detail-tab :title="title">
			<view slot="left">
				<image :src="item" class="pic" mode="widthFix" v-for="(item,index) in GoodsShow[0].goods_pic_info" :key="index"></image>
			</view>
			<view slot="right">
				<image :src="item" class="pic" mode="widthFix" v-for="(item,index) in GoodsShow[0].goods_parameter" :key="index"></image>
			</view>
		</uni-detail-tab>
		<view class="buyControl">
			<view class="left">
				<view class="storeIcon">店铺</view>
				<navigator class="carIcon" open-type="switchTab" url="/pages/buy/buy">购物车</navigator>
			</view>
			<view class="right">
				<view class="addCar" @click="handleAddCar">加入购物车</view>
				<view class="quickBuy" @click="quickBuy">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {goodsDetail} from "../../static/js/goodsDetail.js"
	export default {
		data() {
			return {
				GoodsShow:[],
				title:['商品介绍','商品规格'],
				storeList:[],
				goods_id:0,
				loginInfo:""
				// buyList:[]
			}
		},
		onLoad(option) {
			console.log(option)
			this.GoodsShow = goodsDetail.filter(v=>v.goods_id == option.goods_id)
			console.log(this.GoodsShow)
			//将id存进data
			this.goods_id = option.goods_id
			
		},
		
		created() {
			if(uni.getStorageSync("storeList")){
				this.storeList = uni.getStorageSync("storeList")
			}
		},
		onShow() {
			if(uni.getStorageSync("loginInfo")){
				this.loginInfo = uni.getStorageSync("loginInfo")
			}else{
				this.loginInfo =""
			}
		},
	
		methods: {
			handleAddCar(){
				if(this.loginInfo.length){
					// 1.判断购物车中是否存在这个商品,如果存在,我们将num+1,否则添加新记录
					// 2.假设本地存储中存在storeList
					let state = false//判断是+1还是新增
					let index = 0//如果新增，确定下标索引
					this.storeList.forEach((v,i)=>{
						if(v.goods_id==this.goods_id){
							state = true
							index = i
						}
					})
					if(state){
						this.storeList[index].goods_num += 1
					}else{
						this.GoodsShow[0].loginInfo = this.loginInfo
						this.storeList.push(...this.GoodsShow)
					}
					uni.setStorageSync("storeList",this.storeList)
					uni.showToast({
						title:"加入成功"
					})
				}else{
					uni.showToast({
						title:"请登录",
						icon:"error"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"../login/login"
						})
					},2000)
				}
			},
			getStatus(){
				uni.getSystemInfo({
					success: (e) => {
						console.log(e)
					}
				})
			},
			quickBuy(){
				if(this.loginInfo.length){
					uni.setStorageSync("buyList",this.GoodsShow)
					uni.navigateTo({
						url:"../orderPage/orderPage"
					})
				}else{
					uni.showToast({
						title:"请登录",
						icon:"error"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"../login/login"
						})
					},2000)
				}
				
			}
		}
	}
</script>

<style lang="less">
	.item.active {
		z-index: 9999;
		color: skyblue;
	}
	.goodsWrap{
		.swiper{
			width: 100%;
			height: 600rpx;
			.swiper-item{
				image{
					width: 100%;
				}
			}
		}
		.goodsInfo{
			padding: 20rpx 30rpx;
			.goods_price{
				color: red;
				font-size: 48rpx;
				padding: 20rpx 0;
			}
			.flag{
				background-color: skyblue;
				line-height: 60rpx;
				font-size: 24rpx;
				color: white;
			}
			.goods_name{
				font-size: 36rpx;
				font-weight: bold;
				padding: 20rpx 0;
			}
			.intru{
				font-size: 24rpx;
			}
		}
	}
	.pic{
		width: 100%;
		display: block;
	}
	.buyControl{
		width: 100%;
		height: 100rpx;
		background-color: white;
		position: sticky;
		bottom: 0;
		display: flex;
		.left{
			flex: 3; 
			display: flex;
			align-items: center;
			.storeIcon,.carIcon{
				flex: 1;
				display: flex;
				justify-content: center;
			}
		}
		.right{
			flex: 5;
			display: flex;
			align-items: center;
			.addCar,.quickBuy{
				flex: 1;
				display: flex;
				justify-content: center;
				color: white;
				height: 100%;
				align-items: center;
			}
			.addCar{
				background-color: skyblue;
				
			}
			.quickBuy{
				background-color: skyblue;
			}
		}
	}
</style>
